﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body, html {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #header {
            background: #267AF0;
            width: 100%;
            height: 40px;
        }
        #nav_bar {
            position: relative;
            background: #303030;
            width: 100%;
            height: 30px;
            margin: 0px;
            padding: 0px;
            text-align: center;
        }
        .nav_bar_item:nth-child(5) {
            border-bottom: solid #ff5312 6px;
            background-color: #565656;
        }
        .nav_bar_item {
            cursor: pointer;
            height: 30px;
            width: 12%;
            overflow: hidden;
            position: relative;
            padding-left: 5px;
            padding-right: 5px;
            color: white;
            font-family: Calibri;
            font-size: 14px;
            line-height: 30px;
            margin: 0px -2px 0px -2px;
            display: inline-block;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        .nav_bar_item:hover {
            border-bottom: solid #bef812 6px;
            background-color: #565656;
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        .nav_bar_item > a:link {
            color: white;
            font-family: Calibri;
            font-size: 14px;
            line-height: 30px;
            text-decoration: none;
        }
        .nav_bar_item > a:visited {
            color: white;
            font-family: Calibri;
            font-size: 14px;
            line-height: 30px;
            text-decoration: none;
        }
        .nav_bar_item > a:hover {
            color: white;
            font-family: Calibri;
            font-size: 14px;
            line-height: 30px;
            text-decoration: none;
        }
        .nav_bar_item > a:active {
            color: white;
            font-family: Calibri;
            font-size: 14px;
            line-height: 30px;
            text-decoration: none;
        }
        #header p {
            font-family: Calibri;
            font-size: 12px;
            color: white;
            text-align: right;
            line-height: 30px;
            margin: 0px;
            margin-right: 50px;
        }
        .arrow-down {
            cursor: pointer;
            width: 0px;
            height: 0px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid white;
            position: relative;
            float: right;
            top: -18px;
            right: 18px;
            opacity: 0.7;
        }
        .arrow-down:hover {
            opacity: 1;
        }
        #options_panel {
            width: 150px;
            height: 60px;
            position: fixed;
            top: 40px;
            right: 0px;
            box-shadow: #909090 3px 3px 5px;
            display: none;
        }
        .options_panel_item {
            cursor: pointer;
            padding-left: 10px;
            width: calc(100% - 10px);
            background-color: #267AF0;
            opacity: 0.8;
            color: white;
            font-family: Calibri;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
        }
        .options_panel_item:hover {
            opacity: 1;
        }
        #logo_container {
            position: relative;
            top: 5px;
            margin-left: 5px;
        }
        #logo {
            position: relative;
            background: white;
            height: 30px;
            width: 30px;
            float: left;
        }
        #logo_text {
            top: -1px;
            margin-left: 3px;
            position: relative;
            font-family: Century Gothic;
            color: white;
            float: left;
            line-height: 16px;
            font-size: 20px;
        }
        #content {
            margin: 0px;
            margin-top: 15px;
            position: absolute;
            width: 100%;
            height: calc(100% - 45px);
        }
    </style>
    <script type="text/javascript">

        window.addEventListener("load", optionsMenu);

        function optionsMenu()
        {
            var arrow = document.getElementById("options");
            var options = document.getElementById("options_panel");
            arrow.onclick = function() { options.style.display = "block"; };
        }

    </script>
</head>
<body>
    <div id="header">
        <div id="logo_container">
            <div id="logo"></div>
            <div id="logo_text">Balkan<br />Reporter</div>
            <p>Prijavljeni ste kao: <?php print(Session::get('ime') . " " . Session::get('prezime'));?></p>
            <div id="options" class="arrow-down"></div>
        </div>
    </div>
    <div id="nav_bar">
        <div class="nav_bar_item"><a href="http://localhost/laravel/public/admin/adminpanel">Pregled postova</a></div>
        <div class="nav_bar_item"><a href="http://localhost/laravel/public/admin/vesti/nova">Novi post</a></div>
        <div class="nav_bar_item"><a href="http://localhost/laravel/public/admin/baner/nova">Novi baner</a></div>
        <div class="nav_bar_item"><a href="http://localhost/laravel/public/admin/promo/nova">Novi promo</a></div>
        <div class="nav_bar_item"><a href="http://localhost/laravel/public/admin/korisnici/korisnici">Pregled korisnika</a></div>
    </div>
    <div id="content"></div>
    <div id="options_panel">
        <div class="options_panel_item">Promena lozinke</div>
        <div class="options_panel_item">Odjavi se</div>
    </div>
</body>
</html>